import React, { Component } from 'react';
import './css/index.css'
// import {setlocalStorage,getStorage} from '../localstorage.js'
class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: "",
            list: [],
            finish:[]
        }
    }
    render() {
        const ListItem = this.state.list.map((item,index)=>{
            return (
            <div key={item} className="list">
                <input type="checkbox"  onClick={this.handleFinish.bind(this,item)}/>
                <div>
                <span className="num">{index+1}</span>
                <span>{item}</span>
                </div>
                <button className="btn" onClick={this.handleDelete.bind(this,item)}>...</button>
            </div>
            )
        })
        const Finish = this.state.finish.map((item,index)=>{
            return (
                <div key={item} className='finish'>
                    <input type="checkbox" defaultChecked onClick={this.handleUnfinish.bind(this,item)} />
                    <div>
                        <span className="num">{index+1}</span>
                        <span>{item}</span>
                    </div>
                    <button className="btn" onClick={this.handleFshDelete.bind(this,item)}>...</button>
                </div>
            )
        })
        return (
            <div>
                <div>
                    <h1>TodoList</h1>
                    <input
                        type="text"
                        value={this.state.msg}
                        onChange={this.handleChange}
                        onKeyUp={this.handleEnter} />
                </div>
                <h2>未完成</h2>
                {ListItem}
                <h2>已完成</h2>
                {Finish}
            </div>
        );
    }
    handleFinish = (item)=>{
        // console.log(item);
        let list = this.state.list;
        let finish =this.state.finish;
        var index=list.indexOf(item)
        list.splice(index,1);
        finish.push(item)
        this.setState({
            list,
            finish
        })
    }
    handleUnfinish=(item)=>{
        console.log(item);
        let list=this.state.list;
        let finish=this.state.finish;
        var index=finish.indexOf(item);
        finish.splice(index,1);
        list.push(item)
        this.setState({    
            finish 
        })
    }
    handleChange = (event) => {
        // console.log(event);
        this.setState({
            msg: event.target.value
        })

    }
    handleEnter = (event) => {
        // console.log(event);
        if (event.keyCode==13 ) {
            var list = this.state.list;
            if(!list.includes(this.state.msg)){
                list.unshift(this.state.msg)                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
                this.setState({
                    msg:""
                })
            }else{
                alert("已添加")
            }  
        }
    }
    handleDelete=(item)=>{
        var list=this.state.list;
        var index=list.indexOf(item)
         list.splice(index,1)
         this.setState({
             list
         })
    }
    handleFshDelete=(item)=>{
        var finish=this.state.finish;
        var index=finish.indexOf(item)
        finish.splice(index,1)
         this.setState({
            finish
         })
    }
}

export default Index;
